<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="../templates/principal.xhtml">

    <ui:define name="head">
        <style type="text/css">
            .ui-datatable .ui-datatable-header {
                text-align:right;
            }

            .actions td {
                border: 0px none !important;
                padding: 2px !important;
            }

            .alinhaNovo {
                text-align:left;
            }
        </style>
    </ui:define>

    <ui:define name="content" id="content">
        <h1 class="title ui-widget-header ui-corner-all">Bem Vindo ao Cadastro de Acionista</h1>
        <h:form id="frmCliente" prependId="false">
            <!-- GRID CLIENTE -->
            <p:dataTable id="tabCliente" widgetVar="wtabCliente" var="cliente" value="#{clienteBean.lazyModel}" 
                         paginator="true" rows="10" lazy="true" rowSelectListener="#{clienteBean.onRowSelectCliente}"
                         emptyMessage="Nenhum Registro Cadastrado" selection="#{clienteBean.selectedCliente}">

                <p:column headerText="Razão Social / Nome" sortBy="#{cliente.nomCliente}" filterBy="#{cliente.nomCliente}">
                    <h:outputText value="#{cliente.nomCliente}" />
                </p:column>

                <p:column headerText="C.N.P.J. / C.P.F."  style="text-align: center;">
                    <h:outputText value="#{cliente.numCpf}">
                        <f:converter converterId="mascaraConverter" />
                        <f:attribute name="tipo" value="#{cliente.tipCliente}" />
                    </h:outputText>
                </p:column>

                <p:column headerText="Tipo" sortBy="#{cliente.tipCliente}" filterBy="#{cliente.tipCliente}"  
                          filterOptions="#{clienteBean.tipClienteOptions}" filterMatchMode="exact">
                    <h:outputText value="#{cliente.dscTipo}" />
                </p:column>

                <p:column style="width:50px">
                    <p:outputPanel rendered="#{loginBean.disableButton}">
                        <h:panelGrid columns="2" styleClass="actions" cellpadding="2">
                            <p:commandButton update="messages,panel,tabPrincipal" oncomplete="clienteDialog.show()" image="ui-icon ui-icon-pencil" title="Editar">
                                <f:setPropertyActionListener value="#{cliente}" target="#{clienteBean.selectedCliente}" />
                                <f:setPropertyActionListener value="true" target="#{clienteBean.disable}" />
                            </p:commandButton>

                            <p:commandButton update="messages,panel,tabPrincipal" oncomplete="clienteDialog.show(), confirmation.show()" image="ui-icon ui-icon-close" title="Excluir">
                                <f:setPropertyActionListener value="#{cliente}" target="#{clienteBean.selectedCliente}" />
                                <f:setPropertyActionListener value="true" target="#{clienteBean.disable}" />
                            </p:commandButton>
                        </h:panelGrid>
                    </p:outputPanel>
                    <p:outputPanel rendered="#{!loginBean.disableButton}">
                        <p:commandButton update="messages,panel,tabPrincipal" oncomplete="clienteDialog.show()" image="ui-icon ui-icon-search" title="Visualizar">
                            <f:setPropertyActionListener value="#{cliente}" target="#{clienteBean.selectedCliente}" />
                            <f:setPropertyActionListener value="true" target="#{clienteBean.disable}" />
                        </p:commandButton>
                    </p:outputPanel>
                </p:column>

                <f:facet name="footer">
                    <p:outputPanel rendered="#{loginBean.disableButton}">
                        <div class="alinhaNovo">
                            <p:commandButton value="Novo" update="messages,panel,tabPrincipal" action="#{clienteBean.limpar}" 
                                             oncomplete="clienteDialog.show()" 
                                             image="ui-icon ui-icon-folder-open" title="Clique para Inserir um Novo Acionista" />
                        </div>
                    </p:outputPanel>
                </f:facet>
            </p:dataTable>
            <!-- DETALHES CLIENTE -->
            <p:dialog id="dialogCliente" header="Detalhes Acionista" widgetVar="clienteDialog" resizable="true"
                      showEffect="explode" hideEffect="explode" width="1200">
                <p:panel id="panel">
                    <p:tabView id="tabPrincipal" activeIndex="0" effect="height" effectDuration="fast">
                        <p:tab title="Dados Principais">
                            <h:panelGrid id="display" columns="2" cellpadding="4">
                                <h:outputText value="* Tipo:" />
                                <h:selectOneRadio id="soTipoCliente" value="#{clienteBean.selectedCliente.tipCliente}">
                                    <f:selectItem itemLabel="Jurídica" itemValue="J" />
                                    <f:selectItem itemLabel="Física" itemValue="F" />
                                    <p:ajax listener="#{clienteBean.handleCpf}" update="tabPrincipal" />
                                </h:selectOneRadio>

                                <h:outputText value="* #{clienteBean.labelRazNom}" />
                                <p:inputText id="inNome" value="#{clienteBean.selectedCliente.nomCliente}" style="width:500px; font-weight:bold;" />

                                <h:outputText id="lbProprietario" value="Nome Responsavel:" rendered="#{clienteBean.editMode}" />
                                <p:inputText id="inProprietario" value="#{clienteBean.selectedCliente.nomProprietario}" 
                                             style="width:500px; font-weight:bold;" rendered="#{clienteBean.editMode}" />

                                <h:outputText value="* #{clienteBean.labelCnpj}" />
                                <p:inputMask id="inCpf" value="#{clienteBean.selectedCliente.numCpf}"  
                                             mask="#{clienteBean.mascaraCpf}" style="width:200px; font-weight:bold;" />

                                <h:outputText value="E-Mail:" />
                                <p:inputText id="inEmail" value="#{clienteBean.selectedCliente.dscEmail}" style="width:400px; font-weight:bold;" />

                                <h:outputText value="Site:" />
                                <p:inputText id="inSite" value="#{clienteBean.selectedCliente.dscSite}" style="width:500px; font-weight:bold;" />

                                <h:outputText value="Nacionalidade:" rendered="#{!clienteBean.editMode}" />
                                <h:panelGrid columns="2" id="pnNacionalidade" rendered="#{!clienteBean.editMode}" >
                                    <p:inputText id="inNacionalidade" value="#{clienteBean.selectedCliente.idNacionalidade.dscNacionalidade}" 
                                                 readonly="true" required="true" style="width:400px; font-weight:bold;" />
                                    <p:commandButton image="ui-icon ui-icon-search" title="Pesquisar Nacionalidade" onclick="nacionalidadeDialog.show()" /> 
                                </h:panelGrid>

                                <h:outputText value="* Estado Civil:" rendered="#{!clienteBean.editMode}" />
                                <h:selectOneRadio id="soTipoCivil" value="#{clienteBean.selectedCliente.tipCivil}" rendered="#{!clienteBean.editMode}">
                                    <f:selectItem itemLabel="Casado" itemValue="C" />
                                    <f:selectItem itemLabel="Solteiro" itemValue="S" />
                                    <f:selectItem itemLabel="Divorciado" itemValue="D" />
                                    <f:selectItem itemLabel="Viuvo" itemValue="V" />
                                </h:selectOneRadio>

                                <h:outputText value="Profissão:" rendered="#{!clienteBean.editMode}" />
                                <p:inputText id="inProfissao" value="#{clienteBean.selectedCliente.dscProfissao}" rendered="#{!clienteBean.editMode}" style="width:400px; font-weight:bold;" />

                                <h:outputText value="Telefone:" />
                                <p:inputMask id="inTelefone" value="#{clienteBean.selectedCliente.numTelefone}"  
                                             mask="(99) 9999-9999" style="width:200px; font-weight:bold;" />

                                <h:outputText value="Outro:" />
                                <p:inputMask id="inOutro" value="#{clienteBean.selectedCliente.numOutro}"  
                                             mask="(99) 9999-9999" style="width:200px; font-weight:bold;" />

                                <h:outputText value="* C.E.P.:" />
                                <h:panelGrid columns="2">
                                    <p:inputMask id="inCep" value="#{clienteBean.selectedCliente.codLogradouro.numCep}"  
                                                 mask="99999-999"
                                                 readonly="true" style="width:200px; font-weight:bold;" />
                                    <p:commandButton image="ui-icon ui-icon-search" title="Pesquisar Logradouro" onclick="cepDialog.show()" /> 
                                </h:panelGrid>

                                <h:outputText value="Logradouro:" />
                                <p:inputText id="inLogradouro" value="#{clienteBean.selectedCliente.codLogradouro.dscLogradouro}" 
                                             readonly="true" style="width:500px; font-weight:bold;" />

                                <h:outputText value="Complemento:" />
                                <p:inputText id="inComplemento" value="#{clienteBean.selectedCliente.dscComplemento}" 
                                             style="width:400px; font-weight:bold;" />

                                <h:outputText value="* Numero:" />
                                <p:inputText id="inNumero" value="#{clienteBean.selectedCliente.numEndereco}" style="width:100px; font-weight:bold;" />

                                <h:outputText value="Bairro:" />
                                <p:inputText id="inBairro" value="#{clienteBean.selectedCliente.codLogradouro.codBairro.dscBairro}" 
                                             readonly="true" style="width:400px; font-weight:bold;" />

                                <h:outputText value="Cidade:" />
                                <p:inputText id="inCidade" value="#{clienteBean.selectedCliente.codLogradouro.codBairro.codCidade.dscCidade}" 
                                             readonly="true" style="width:300px; font-weight:bold;" />

                                <h:outputText value="U.F." />
                                <p:inputText id="inUf" value="#{clienteBean.selectedCliente.codLogradouro.codBairro.codCidade.codUf.codUf}" 
                                             readonly="true" style="width:50px; font-weight:bold;" />

                                <f:facet name="footer" rendered="#{clienteBean.disableGerencia}">
                                    <p:fieldset legend="Dados Gerenciais" rendered="#{clienteBean.disableGerencia}">
                                        <h:panelGrid columns="6">
                                            <h:outputText value="Qde. de Ações:" />
                                            <p:inputText id="inQde" value="#{clienteBean.selectedCliente.qdeAcao}" 
                                                         onkeyup="javascript:maskIt(this,event,'##########',true)" style="width:100px; font-weight:bold; text-align: right">
                                                <f:convertNumber pattern="########0" minFractionDigits="0" />
                                            </p:inputText>

                                            <h:outputText value="% Participação:" />
                                            <p:inputText id="inPerc" widgetVar="inPerc" value="#{clienteBean.selectedCliente.percPartic}" style="width:100px; font-weight:bold; text-align: right;"
                                                         onkeyup="javascript:maskIt(this,event,'###.###.###,####',true)" readonly="true">
                                                <f:convertNumber locale="pt_BR" pattern="###,###,##0.0000" minFractionDigits="2" />
                                            </p:inputText>

                                            <h:outputText value="No.Folha Anterior:" />
                                            <p:inputText id="inFolha" value="#{clienteBean.selectedCliente.numFolha}" style="width:50px; font-weight:bold;" />

                                            <h:outputText value="No.Livro Anterior:" />
                                            <h:panelGrid columns="2" >
                                                <p:inputText id="inLivro" value="#{clienteBean.selectedCliente.idLivro.numLivro}" readonly="true"
                                                             style="width:50px; font-weight:bold; text-align: right" />
                                                <p:commandButton image="ui-icon ui-icon-search" title="Pesquisar Livro" onclick="livroDialog.show()" /> 
                                            </h:panelGrid>

                                            <h:outputText value="Saldo Anterior:" />
                                            <p:inputText id="inSaldo" value="#{clienteBean.selectedCliente.saldoAnterior}" 
                                                         onkeyup="javascript:maskIt(this,event,'##########',true)" style="width:100px; font-weight:bold; text-align: right">
                                                <f:convertNumber pattern="########0" minFractionDigits="0" />
                                            </p:inputText>

                                            <h:outputText value="Data Saldo Anterior:" />
                                            <p:calendar id="imDatSaldo" locale="pt" value="#{clienteBean.selectedCliente.datSaldoAnterior}" pattern="dd/MM/yyyy" style="font-weight:bold;" />
                                        </h:panelGrid>
                                    </p:fieldset>
                                </f:facet>
                            </h:panelGrid>    
                        </p:tab>
                        <p:tab title="Observações">
                            <p:inputTextarea id="inObs" rows="15" value="#{clienteBean.selectedCliente.dscObs}" style="width:800px; font-weight:bold;" />  
                        </p:tab>
                        <p:tab title="Histórico">
                            <p:inputTextarea id="inHistorico" rows="15" readonly="true" value="#{clienteBean.selectedCliente.dscHistorico}" style="width:800px; font-weight:bold;" /> 
                        </p:tab>
                    </p:tabView>
                    <p:outputPanel rendered="#{loginBean.disableButton}">
                        <p:commandButton value="Novo" update="messages,panel,tabPrincipal" action="#{clienteBean.limpar}" oncomplete="clienteDialog.show()" 
                                         image="ui-icon ui-icon-folder-open" title="Clique para Inserir um Novo Acionista" />

                        <p:commandButton value="Gravar Inserir" update="messages,panel,tabPrincipal,tabCliente" 
                                         actionListener="#{clienteBean.inserir}" rendered="#{!clienteBean.disable}"  oncomplete="clienteDialog.hide()" />

                        <p:commandButton value="Gravar Alterar" update="messages,panel,tabPrincipal,tabCliente"
                                         actionListener="#{clienteBean.alterar}" rendered="#{clienteBean.disable}" oncomplete="clienteDialog.hide()" />

                        <p:commandButton value="Fechar" update="messages,panel,tabPrincipal,tabCliente"
                                         onclick="clienteDialog.hide()" />
                    </p:outputPanel>
                    <!-- CONFIRMA EXCLUSAO CLIENTE -->
                    <p:confirmDialog id="confirmacaoDlg" message="Confirma a Exclusão desse Acionista ?"  
                                     showEffect="bounce" hideEffect="explode" width="350"
                                     header="Exclusão do Acionista" severity="alert" widgetVar="confirmation">  

                        <p:commandButton value="Sim" update="messages,panel,tabPrincipal,tabCliente" 
                                         oncomplete="confirmation.hide(),clienteDialog.hide()" actionListener="#{clienteBean.excluir}" />  
                        <p:commandButton value="Não" onclick="confirmation.hide(),clienteDialog.hide()" type="button" />   

                    </p:confirmDialog>
                </p:panel>
            </p:dialog>
            <!-- PESQUISA LIVRO  -->
            <p:dialog id="livroDialog" widgetVar="livroDialog" header="Pesquisa Livro" resizable="true"
                      width="600" showEffect="explode" hideEffect="explode" position="'right',30">

                <p:dataTable id="tabLivro" widgetVar="wtabLivro" var="livro" value="#{livroBean.lazyModel}" paginator="true" rows="5" lazy="true"
                             emptyMessage="Nenhum Registro Retornado ..."
                             selection="#{clienteBean.selectedLivro}" selectionMode="single"
                             onRowSelectComplete="livroDialog.hide()" onRowSelectUpdate="inLivro">

                    <f:facet name="header">
                        Selecione uma linha e clique para Seleção
                    </f:facet>

                    <p:column headerText="Numero" sortBy="#{livro.numLivro}" filterBy="#{livro.numLivro}">
                        <h:outputText value="#{livro.numLivro}" />
                    </p:column>

                    <p:column headerText="Data Abertura" filterBy="#{livro.datAbertura}" sortBy="#{livro.datAbertura}" style="text-align: center;">
                        <h:outputText value="#{livro.datAbertura}">
                            <f:convertDateTime type="date" dateStyle="short" pattern="dd/MM/yyyy"/>
                        </h:outputText>
                    </p:column>

                    <p:column headerText="Data Fechamento" filterBy="#{livro.datFechamento}" sortBy="#{livro.datFechamento}" style="text-align: center;">
                        <h:outputText value="#{livro.datFechamento}">
                            <f:convertDateTime type="date" dateStyle="short" pattern="dd/MM/yyyy"/>
                        </h:outputText>
                    </p:column>
                </p:dataTable>
            </p:dialog>

            <!-- PESQUISA NACIONALIDADE -->
            <p:dialog id="dialogNacionalidade" header="Pesquisa Nacionalidade" widgetVar="nacionalidadeDialog" resizable="true"
                      width="600" showEffect="explode" hideEffect="explode" position="20,30">

                <p:dataTable id="tabNacionalidadePesq" widgetVar="wtabNacionalidade" var="nacionalidade" value="#{nacionalidadeBean.lazyModel}" 
                             paginator="true" rows="5" lazy="true"
                             selection="#{nacionalidadeBean.selectedNacionalidade}" selectionMode="single"
                             onRowSelectComplete="nacionalidadeDialog.hide()" rowSelectListener="#{clienteBean.onRowSelectNavigate}"
                             onRowSelectUpdate="pnNacionalidade">

                    <f:facet name="header">
                        Pesquise e selecione uma linha
                    </f:facet>

                    <p:column headerText="Descrição" sortBy="#{nacionalidade.dscNacionalidade}" filterBy="#{nacionalidade.dscNacionalidade}">
                        <h:outputText value="#{nacionalidade.dscNacionalidade}" />
                    </p:column>
                </p:dataTable>

            </p:dialog>

            <!-- GRID PESQUISA ENDERECO -->
            <p:dialog id="cepDialog" header="Pesquisa Logradouro" widgetVar="cepDialog" resizable="true"
                      width="800" showEffect="explode" hideEffect="explode" position="'right',30">
                <p:dataTable id="tabEndereco" widgetVar="tabEndereco" var="endereco" value="#{enderecoBean.lazyModelEndereco}"
                             paginator="true" rows="5" lazy="true" rowSelectListener="#{clienteBean.onRowSelectNavigateEndereco}"
                             selectionMode="single"
                             onRowSelectComplete="cepDialog.hide()" onRowSelectUpdate="display, tabEndereco">

                    <f:facet name="header">
                        Selecione uma linha e clique para Manutenção
                        <p:commandButton image="ui-icon ui-icon-search" title="Pesquisar" onclick="pesquisaDialog.show()" type="button" />
                    </f:facet>

                    <p:column headerText="C.E.P." sortBy="#{endereco.numCep}" style="width:50px !important;">
                        <h:outputText value="#{endereco.numCep}" />
                    </p:column>

                    <p:column headerText="Descrição" sortBy="#{endereco.dscLogradouro}" style="width:300px !important;">
                        <h:outputText value="#{endereco.dscLogradouro}" />
                    </p:column>

                    <p:column headerText="Bairro" sortBy="#{endereco.codBairro.dscBairro}" style="width:300px !important;">
                        <h:outputText value="#{endereco.codBairro.dscBairro}" />
                    </p:column>

                    <p:column headerText="Cidade" sortBy="#{endereco.codBairro.codCidade.dscCidade}" style="width:300px !important;">
                        <h:outputText value="#{endereco.codBairro.codCidade.dscCidade}" />
                    </p:column>

                    <p:column headerText="U.F." sortBy="#{endereco.codBairro.codCidade.codUf.codUf}" style="width:50px !important;">
                        <h:outputText value="#{endereco.codBairro.codCidade.codUf.codUf}" />
                    </p:column>
                </p:dataTable>
            </p:dialog>
            <!-- DEFINICAO PESQUISA ENDERECO -->
            <p:dialog id="dialogPesquisa" header="Pesquisa dos Logradouros" widgetVar="pesquisaDialog" resizable="true"
                      width="600" showEffect="explode" hideEffect="explode" onHide="javascript:AbreJanela(false);" position="'right',30">

                <div id="conexao" name="conexao" style="visibility:hidden" align="center">
                    <p:fieldset legend="Aguarde ..." style="text-align: left">
                        <img src="../design/ajaxloading.gif" />
                    </p:fieldset>
                </div>
                <h:panelGrid id="displayPesquisa" columns="2" cellpadding="4">
                    <h:outputText value="" />
                    <p:messages />

                    <h:outputText value="C.E.P.:" />
                    <p:inputText id="numeroCep" value="#{enderecoBean.numeroCep}" style="width:100px; font-weight:bold;" onfocus="javascript:AbreJanela(false);">
                        <p:ajax event="blur" process="@this"/>
                    </p:inputText>

                    <h:outputText value="Descrição:" />
                    <p:inputText id="descLogradouro" value="#{enderecoBean.descLogradouro}" style="width:400px; font-weight:bold;" onfocus="javascript:AbreJanela(false);">
                        <p:ajax event="blur" process="@this"/>
                    </p:inputText>

                    <h:outputText value="Bairro:" />
                    <p:inputText id="descBairro" value="#{enderecoBean.descBairro}" style="width:400px; font-weight:bold;" onfocus="javascript:AbreJanela(false);">
                        <p:ajax event="blur" process="@this"/>
                    </p:inputText>

                    <h:outputText value="Cidade:" />
                    <p:inputText id="descCidade" value="#{enderecoBean.descCidade}" style="width:400px; font-weight:bold;" onfocus="javascript:AbreJanela(false);">
                        <p:ajax event="blur" process="@this"/>
                    </p:inputText>

                    <h:outputText value="U.F.:" />
                    <p:inputText id="descUf" value="#{enderecoBean.descUf}" style="width:50px; font-weight:bold;" onfocus="javascript:AbreJanela(false);">
                        <p:ajax event="blur" process="@this" />
                    </p:inputText>
                </h:panelGrid>
                <br />
                <p:commandButton id="pesqEndereco" image="ui-icon ui-icon-search" value="Pesquisar" actionListener="#{enderecoBean.PesquisarEndereco}"
                                 oncomplete="pesquisaDialog.hide()" update="tabEndereco" process="@this" onclick="javascript:AbreJanela(true);" />
            </p:dialog>
        </h:form>
    </ui:define>

</ui:composition>